M

MLOG

فارسی

راهنمای جامع CSS overscroll-behavior، شامل بررسی ویژگی‌ها، موارد استفاده و بهترین شیوه‌ها برای کنترل مرزهای اسکرول و ایجاد تجربه‌ی کاربری یکپارچه.

رفتار overscroll در CSS: تسلط بر کنترل مرز اسکرول برای بهبود تجربه کاربری (UX)

در وب مدرن، ایجاد تجربه‌های کاربری روان و شهودی از اهمیت بالایی برخوردار است. یکی از جنبه‌های حیاتی این موضوع، مدیریت رفتار اسکرول، به‌ویژه زمانی است که کاربران به مرزهای نواحی قابل اسکرول می‌رسند. اینجاست که ویژگی overscroll-behavior در CSS وارد عمل می‌شود. این راهنمای جامع به تفصیل overscroll-behavior را بررسی می‌کند و ویژگی‌ها، موارد استفاده و بهترین شیوه‌ها برای دستیابی به تعامل کاربری بهتر را پوشش می‌دهد.

Overscroll Behavior چیست؟

overscroll-behavior یک ویژگی CSS است که کنترل می‌کند چه اتفاقی بیفتد زمانی که به مرز اسکرول یک عنصر (مانند یک کانتینر قابل اسکرول یا خود سند) رسیده شود. به طور پیش‌فرض، وقتی کاربر از بالا یا پایین یک ناحیه قابل اسکرول عبور می‌کند، مرورگر اغلب رفتارهایی مانند تازه‌سازی صفحه (در دستگاه‌های موبایل) یا اسکرول کردن محتوای زیرین را فعال می‌کند. overscroll-behavior به توسعه‌دهندگان اجازه می‌دهد تا این رفتار را سفارشی کرده، از عوارض جانبی ناخواسته جلوگیری کنند و تجربه‌ای یکپارچه‌تر ایجاد نمایند.

درک ویژگی‌ها

ویژگی overscroll-behavior سه مقدار اصلی را می‌پذیرد:

علاوه بر این، overscroll-behavior می‌تواند با استفاده از ویژگی‌های فرعی زیر بر روی محورهای خاص اعمال شود:

برای مثال:

.scrollable-container {
  overscroll-behavior-y: contain; /* از زنجیره اسکرول عمودی جلوگیری می‌کند */
  overscroll-behavior-x: auto;    /* به زنجیره اسکرول افقی اجازه می‌دهد */
}

موارد استفاده و مثال‌ها

overscroll-behavior می‌تواند در سناریوهای مختلفی برای بهبود تجربه کاربری و جلوگیری از رفتار ناخواسته استفاده شود. بیایید برخی از موارد استفاده رایج را با مثال‌های عملی بررسی کنیم.

۱. جلوگیری از تازه‌سازی صفحه در موبایل

یکی از رایج‌ترین موارد استفاده از overscroll-behavior جلوگیری از تازه‌سازی آزاردهنده صفحه است که اغلب در دستگاه‌های موبایل هنگام اسکرول کردن کاربر به بالا یا پایین صفحه رخ می‌دهد. این امر به‌ویژه برای برنامه‌های تک‌صفحه‌ای (SPA) و وب‌سایت‌هایی با محتوای پویا مهم است.

body {
  overscroll-behavior-y: contain; /* از تازه‌سازی صفحه در هنگام overscroll جلوگیری می‌کند */
}

با اعمال overscroll-behavior: contain به عنصر body، می‌توانید از رفتار کشیدن-برای-تازه‌سازی (pull-to-refresh) در دستگاه‌های موبایل جلوگیری کرده و تجربه‌ی کاربری روان‌تر و قابل پیش‌بینی‌تری را تضمین کنید.

۲. محدود کردن اسکرول در مودال‌ها و لایه‌های رویی

هنگام استفاده از مودال‌ها یا لایه‌های رویی (overlays)، اغلب مطلوب است که از اسکرول شدن محتوای زیرین در زمان باز بودن مودال جلوگیری شود. overscroll-behavior می‌تواند برای محدود کردن اسکرول در خود مودال استفاده شود.

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* فعال کردن اسکرول در داخل مودال */
  overscroll-behavior: contain; /* جلوگیری از اسکرول شدن محتوای زیرین */
}

.modal-content {
  /* استایل‌دهی به محتوای مودال */
}

در این مثال، عنصر .modal دارای overscroll-behavior: contain است که از اسکرول شدن صفحه زیرین هنگامی که کاربر به مرز اسکرول مودال می‌رسد، جلوگیری می‌کند. ویژگی overflow: auto تضمین می‌کند که خود مودال در صورتی که محتوایش از ارتفاع آن بیشتر شود، قابل اسکرول باشد.

۳. ایجاد نشانگرهای اسکرول سفارشی

با تنظیم overscroll-behavior: none، می‌توانید به طور کامل اثرات پیش‌فرض overscroll را غیرفعال کرده و نشانگرهای اسکرول یا انیمیشن‌های سفارشی را پیاده‌سازی کنید. این کار کنترل بیشتری بر تجربه کاربری و توانایی ایجاد تعاملات منحصر به فرد و جذاب را فراهم می‌کند.

.scrollable-area {
  overflow: auto;
  overscroll-behavior: none; /* غیرفعال کردن رفتار پیش‌فرض overscroll */
}

.scrollable-area::-webkit-scrollbar {
  display: none; /* پنهان کردن نوار اسکرول پیش‌فرض (اختیاری) */
}

.scroll-indicator {
  /* استایل‌دهی به نشانگر اسکرول سفارشی شما */
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  /* ... */
}

.scrollable-area:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background: linear-gradient(to top, rgba(0,0,0,0.1), transparent);
  pointer-events: none; /* اجازه اسکرول از روی نشانگر */
}

این مثال نشان می‌دهد که چگونه می‌توان رفتار پیش‌فرض overscroll را غیرفعال کرد و با استفاده از شبه‌عناصر (pseudo-elements) و گرادیان‌های CSS یک نشانگر اسکرول سفارشی ایجاد کرد. ویژگی pointer-events: none تضمین می‌کند که نشانگر با عمل اسکرول تداخل نداشته باشد.

۴. بهبود کاروسل‌ها و اسلایدرها

overscroll-behavior-x می‌تواند به ویژه برای کاروسل‌ها و اسلایدرها که تعامل اصلی آن‌ها اسکرول افقی است، مفید باشد. با تنظیم overscroll-behavior-x: contain، می‌توانید از اینکه کاروسل به طور تصادفی ناوبری عقب/جلو مرورگر را در دستگاه‌های موبایل فعال کند، جلوگیری نمایید.

.carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain; /* جلوگیری از ناوبری عقب/جلو */
}

.carousel-item {
  scroll-snap-align: start;
  /* ... */
}

این قطعه کد نشان می‌دهد که چگونه اسکرول افقی را در یک کاروسل محدود کرده، از ناوبری ناخواسته جلوگیری کنید و یک تجربه کاربری متمرکز را تضمین نمایید.

۵. بهبود دسترس‌پذیری در نواحی قابل اسکرول

هنگام پیاده‌سازی نواحی قابل اسکرول، در نظر گرفتن دسترس‌پذیری مهم است. در حالی که overscroll-behavior عمدتاً بر تعاملات بصری تأثیر می‌گذارد، می‌تواند با جلوگیری از رفتار غیرمنتظره و تضمین یک تجربه کاربری ثابت در دستگاه‌ها و مرورگرهای مختلف، به طور غیرمستقیم بر دسترس‌پذیری تأثیر بگذارد.

اطمینان حاصل کنید که نواحی قابل اسکرول دارای ویژگی‌های ARIA مناسب (مانند role="region"، aria-label) هستند تا اطلاعات معنایی را برای فناوری‌های کمکی فراهم کنند. پیاده‌سازی‌های خود را با صفحه‌خوان‌ها آزمایش کنید تا تأیید کنید که رفتار اسکرول قابل دسترس و قابل پیش‌بینی است.

بهترین شیوه‌ها و ملاحظات

هنگام استفاده از overscroll-behavior، بهترین شیوه‌ها و ملاحظات زیر را در نظر داشته باشید:

سازگاری مرورگر

overscroll-behavior از پشتیبانی عالی در مرورگرهای مدرن، از جمله کروم، فایرفاکس، سافاری و اج برخوردار است. با این حال، همیشه ایده خوبی است که آخرین اطلاعات سازگاری مرورگر را در وب‌سایت‌هایی مانند Can I Use (caniuse.com) بررسی کنید تا اطمینان حاصل کنید که مخاطبان هدف شما می‌توانند پیاده‌سازی‌های شما را به درستی تجربه کنند.

برای مرورگرهای قدیمی‌تر که از overscroll-behavior پشتیبانی نمی‌کنند، ممکن است نیاز به استفاده از polyfillها یا تکنیک‌های جایگزین برای دستیابی به اثرات مشابه داشته باشید. با این حال، به خاطر داشته باشید که این رویکردها ممکن است رفتار بومی overscroll-behavior را به طور کامل تکرار نکنند.

مثال‌هایی با کد و زمینه جهانی

مثال ۱: پشتیبانی چند زبانه در یک نوار خبری در حال اسکرول

یک نوار خبری را تصور کنید که عناوین را به چندین زبان نمایش می‌دهد. شما می‌خواهید اسکرول روان را بدون توجه به زبان مورد استفاده تضمین کنید و از تازه‌سازی تصادفی صفحه در موبایل جلوگیری کنید.

<div class="news-ticker">
  <ul>
    <li><span lang="en">خبر فوری: به‌روزرسانی بازار جهانی سهام</span></li>
    <li><span lang="fr">Dernières Nouvelles: Mise à Jour du Marché Boursier Mondial</span></li>
    <li><span lang="ja">速報：世界の株式市場の最新情報</span></li>
    <!-- عناوین بیشتر به زبان‌های مختلف -->
  </ul>
</div>

<style>
.news-ticker {
  overflow-x: auto;
  overscroll-behavior-x: contain; /* از ناوبری تصادفی عقب/جلو در موبایل جلوگیری می‌کند */
  white-space: nowrap;
}

.news-ticker ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-block;
  animation: ticker 20s linear infinite;
}

.news-ticker li {
  display: inline-block;
  margin-right: 20px;
}

@keyframes ticker {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
</style>

با اعمال overscroll-behavior-x: contain به عنصر .news-ticker، شما از اینکه نوار خبری به طور تصادفی ناوبری عقب/جلو مرورگر را در دستگاه‌های موبایل فعال کند، بدون توجه به زبان نمایش داده شده، جلوگیری می‌کنید.

مثال ۲: کاتالوگ محصولات بین‌المللی با تصاویر قابل بزرگ‌نمایی

یک وب‌سایت تجارت الکترونیک را در نظر بگیرید که یک کاتالوگ محصول با تصاویر قابل بزرگ‌نمایی دارد. شما می‌خواهید از اسکرول شدن صفحه زیرین هنگامی که کاربران در حال بزرگ‌نمایی تصاویر در کاتالوگ هستند، جلوگیری کنید.

<div class="product-catalog">
  <div class="product">
    <img src="product1.jpg" alt="تصویر محصول" class="zoomable-image">
  </div>
  <div class="product">
    <img src="product2.jpg" alt="تصویر محصول" class="zoomable-image">
  </div>
  <!-- محصولات بیشتر -->
</div>

<style>
.product-catalog {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.product {
  width: 300px;
  margin: 20px;
}

.zoomable-image {
  width: 100%;
  cursor: zoom-in;
}

.zoomable-image.zoomed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: rgba(0, 0, 0, 0.8);
  cursor: zoom-out;
  overscroll-behavior: contain; /* از اسکرول شدن صفحه زیرین جلوگیری می‌کند */
}
</style>

<script>
const images = document.querySelectorAll('.zoomable-image');

images.forEach(image => {
  image.addEventListener('click', () => {
    image.classList.toggle('zoomed');
  });
});
</script>

در این مثال، هنگامی که کاربر روی یک .zoomable-image کلیک می‌کند، آن به حالت بزرگ‌نمایی با position: fixed تغییر می‌کند و کل ویوپورت را می‌پوشاند. ویژگی overscroll-behavior: contain به تصویر بزرگ‌شده اعمال می‌شود و از اسکرول شدن کاتالوگ محصولات زیرین در حین بزرگ‌نمایی تصویر جلوگیری می‌کند.

نتیجه‌گیری

overscroll-behavior یک ویژگی قدرتمند CSS است که به توسعه‌دهندگان کنترل بیشتری بر مرزهای اسکرول و تجربه کاربری می‌دهد. با درک ویژگی‌ها و موارد استفاده آن، می‌توانید تعاملات روان‌تر و شهودی‌تری ایجاد کرده و از رفتار ناخواسته در وب‌سایت‌ها و برنامه‌های خود جلوگیری کنید. به یاد داشته باشید که به طور کامل آزمایش کنید، دسترس‌پذیری را در نظر بگیرید و از overscroll-behavior به طور سنجیده برای دستیابی به بهترین نتایج استفاده کنید. پیاده‌سازی موثر overscroll-behavior نیازمند ایجاد تعادل بین کنترل و انتظارات کاربر است، تا قابلیت استفاده را بدون مختل کردن تعاملات طبیعی بهبود بخشد.

یادگیری بیشتر

رفتار overscroll در CSS: تسلط بر کنترل مرز اسکرول برای بهبود تجربه کاربری (UX) | MLOG